<template>
    <div class="newsList-warp">
        <!-- <tab :custom-bar-width="getBarWidth" :scroll-threshold="5" :line-width="3" bar-active-color="rgb(255,218,68)">
            <tab-item v-for="(item,index) in tabItem" :selected="index === 1" :key="item.id">{{item.name}}</tab-item>
        </tab> -->
        <div class="group">
            <div class="cell-box  flex" v-for="(item,index) in messageList" :key="index">
                <div class="news-box flex" @click="viewNewsDetail(item.id)">
                    <img :src="item.img" alt="" class="left">
                    <div class="center">
                        <div class="name-box">{{item.title}}</div>
                        <div class="section-line">
                            {{item.simpleText}}
                        </div>
                        <div class="supplement">
                            <span class="date">{{item.createDateName}}</span>
                            <span v-if="item.readNumber">浏览·{{item.readNumber}}</span>
                            <span v-else>浏览·0</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="bom-tip">请不要相信任何人发送的二维码链接,请勿私下交易谨防被骗</div> -->
    </div>
</template>

<script>
    import axios from '@/api/request'
    import {Cell,Group,CellBox,Card,} from "vux";

    export default {
        data() {
            return {
                messageList: [
                   
                ]
            }
        },
        components: {
            Cell,Group,CellBox,
        },
        created(){
            this.fetchNewsList()
        },
        methods: {
            getBarWidth: function(index) {
                index = index || 0;
                let text = this.tabItem[index].name;
                // debugger
                return text.length * 16 / 37.5  + "rem";
            },
            fetchNewsList() {
                axios('/device/information/list','post',{}).then(res=>{
                    if(res.data.code==1000){
                        // console.log(res)
                        let arr = res.data.data.list
                        this.messageList = arr;
                        // console.log(this.messageList)
                    }
                })
            },
            viewNewsDetail(id){
                this.$router.push({path:'/newsDetail',query:{newsId:id}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .newsList-warp{
        height: 100%;
        box-sizing: border-box;
        // padding-top: 20rem/75;
        background: rgb(242,243,247);
    }
    .cell-box:nth-child(1){
        background: #eee;
    }
    .news-box {
        width: 100%;
        background: #fff;
        height: 200rem/75;
        border-bottom: 1rem/37.5 solid #dbdbdb;
        .left {
            width: 200rem/75;
            height: 150rem/75;
            margin-left: 30rem/75;
            margin-top: 25rem/75;
        }
        .center {
            width: 445rem/75;
            margin-top: 22rem/75;
            margin-left: 42rem/75;
            // margin-right: 20rem/75;
            .name-box {
                font-size: 30rem/75;
                color: #333;
                    font-size: 0.4rem;
    color: #333;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
                font-weight: 600;
            }
            .section-line {
                height: 64rem/75;
                font-size: 24rem/75;
                color: #999;
                margin-top: 14rem/75;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;

                // text-overflow:ellipsis;  
                // white-space: nowrap;
                // font-weight: 600;
            }
            .supplement{
                display: flex;
                font-size: 24rem/75;
                justify-content: space-between;
                margin-top: 18rem/75;
                padding-bottom: 6rem/37.5;
                color: #999;
            }
        }
        .right{
            margin-top: 34rem/75;
            width: 110rem/75;
            height: 110rem/75;
            border-radius: 6px;
            .redTip{
                background: #ff4444;
                width: 76rem/75;
                height: 36rem/75;
                line-height: 36rem/75;
                border-radius: 36rem/75;
                text-align: center;
                color: #fff;
            }
        }
    }
    .cell-box:last-child .news-box{
        border-bottom: none;
    }
    .first-cell-box .news-box{
        .right{
            margin-top: 72rem/75;
        }
    }
    .bom-tip{
        padding-top: 44rem/75;
        text-align: center;
        color: #999;
        font-size: 20rem/75;
    }
</style>
